<template>
  <div class="olcs-container">
    <div class="olcs-main">
      <div id="olcs2d"
           class="olcs-item"
           :style="{'width': show2d && !show3d ? '100%' : show2d && show3d ? '50%' : '0'}"></div>
      <div id="olcs3d"
           class="olcs-item"
           :style="{'width': show3d && !show2d ? '100%' : show2d && show3d ? '50%' : '0'}"></div>
    </div>
    <!-- <div class="panel-main">
      <old-panel></old-panel>
    </div> -->
    <div v-if="show"
         class="switch-main">
      <span v-for="(item, index) in mapTypeList"
            :key="index"
            :value="item.value"
            class="switch-item"
            @click="mapTypeSwitch(item.value)">{{ item.label }}</span>
    </div>
    <div class="zoom-main">
      <span class="zoom-btn"
            @click="handleZoomIn">+</span>
      <span class="zoom-btn"
            @click="handleZoomOut">-</span>
      <span class="zoom-text">{{ zoom }}</span>
    </div>
    <div id="fpsMain"
         class="fps-main"></div>
  </div>
</template>

<script>
import OlcsMap from './index.js'
import Cookie from '@/common/scripts/cookie.js'

const MAP_TYPE_LIST = [{ label: '2D', value: '2d' }, { label: '3D', value: '3d' }, { label: 'DB', value: 'db' }]

// cesium 直接放入vue中如：store、data、computed，会引起Cesium帧率严重下降的问题
let olcsMap = null
export default {
  name: 'Olcs',
  data () {
    return {
      show: 1,
      zoom: 3,
      show2d: 1,
      show3d: 0,
      mapTypeList: MAP_TYPE_LIST,
      stp: null
    }
  },
  components: {
    // oldPanel: () => import('@/olCesiumMap/panel.vue')
  },
  mounted () {
    // 原本想着点击3D时再加载3D地图，实际操作过程中，会导致2D和3D地图不同步，果断pass
    // 此处注册所有事件回掉函数，对外广播，在父组件中按需加载
    const opts = {
      zoom: this.zoom,
      target: 'olcs2d',
      target3d: 'olcs3d',
      enabled: false, // true 开放3D false (默认)隐藏3D
      switchMapTypeCallback: this.switchMapTypeCallback,
      updatePanelCallback: this.updatePanelCallback,
      singleClickCallback: this.singleClickCallback,
      mapZoomCallback: this.mapZoomCallback,
      mouseMoveCallback: this.mouseMoveCallback
    }
    olcsMap = new OlcsMap(opts)
    window.olcsMap2 = olcsMap // 将olcsMap挂载到window上
    this.$emit('init-map')

    // 每次进来跳转到上次最后位置
    let latlng = JSON.parse(unescape(Cookie.get('latlng'))) || [116, 40, 80]
    olcsMap.locationToSomeWhereByLatlng(latlng)

    // let isTest = Cookie.get('olcsTest')
    // if (isTest && isTest == 1) this.show = 1
    // else this.show = 0
  },
  methods: {
    mapTypeSwitch (val) {
      switch (val) {
        case '2d':
          this.show2d = 1
          this.show3d = 0
          break
        case '3d':
          this.show2d = 0
          this.show3d = 1
          break
        case 'db':
          this.show2d = this.show3d = 1
          break
      }
      olcsMap.setMapType(val)
    },
    switchMapTypeCallback (mode) {
      this.show2d = mode.map2d
      this.show3d = mode.map3d
    },
    mapZoomCallback (zoom) {
      this.zoom = zoom
    },
    mouseMoveCallback (latlng) {
      this.$emit('mouse-move', latlng)
    },
    handleZoomIn () {
      olcsMap.zoomIn()
      this.zoom = olcsMap.getZoom()
    },
    handleZoomOut () {
      olcsMap.zoomOut()
      this.zoom = olcsMap.getZoom()
    },
    updatePanelCallback (options) {
      this.$emit('update-panel-callback', options)
    },
    singleClickCallback (latlng) {
      this.$emit('single-click-callback', latlng)
    }
  }
}
</script>

<style lang="scss" scoped>
.olcs-container,
.olcs-main {
  width: 100%;
  height: 100%;
}
.olcs-container {
  position: relative;
  .panel-main {
    // @include pos-abs($r: 2px, $t: 2px);
    position: absolute;
    top: 2px;
    right: 2px;
  }
  .switch-main {
    width: 92px;
    height: 24px;
    // @include pos-abs($l: 20px, $b: 80px);
    // @include pos-abs($l: 20px, $b: 30px);
    position: absolute;
    bottom: 30px;
    left: 20px;
    z-index: 100;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    overflow: hidden;
    .switch-item {
      display: inline-block;
      // @include wh(30px, 22px);
      width: 30px;
      height: 22px;
      line-height: 22px;
      font-size: 14px;
      background: #fff;
      vertical-align: top;
      cursor: pointer;
      user-select: none;
      box-sizing: border-box;
      &:first-child {
        border-right: 1px solid #ccc;
      }
      &:last-child {
        border-left: 1px solid #ccc;
      }
    }
  }
  .zoom-main {
    // @include wh(20px, auto);
    width: 20px;
    // @include pos-abs($r: 20px, $b: 100px);
    position: absolute;
    right: 20px;
    bottom: 100px;
    z-index: 100;
    font-weight: 800;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 4px;
    .zoom-btn {
      display: block;
      // @include wh(20px, 20px);
      width: 20px;
      height: 20px;
      line-height: 18px;
      font-size: 20px;
      background: #fff;
      border-radius: 100%;
      margin-bottom: 5px;
      cursor: pointer;
      user-select: none;
    }
    .zoom-text {
      color: #fff;
      font-size: 14px;
    }
  }
  .fps-main {
    position: absolute;
    right: 20px;
    bottom: 45px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-radius: 4px;
  }
}
.olcs-main {
  display: flex;
  overflow: hidden;
  .olcs-item {
    // @include wh();
    width: 100%;
    height: 100%;
    position: relative;
  }
}
</style>
<style>
/* olcs logo水印 */
.cesium-credit-logoContainer,
.cesium-credit-textContainer {
  display: none !important;
}

/* 无人机 2D */
.uav-main {
  width: 46px;
  height: 46px;
  cursor: pointer;
}
.uav-main img {
  width: 100%;
  height: 100%;
}
.svg-uav-breath {
  margin: 0 auto;
  animation: breathe 2s infinite ease-in-out;
}
@keyframes breathe {
  0% {
    transform: scale(1);
    transform-origin: 50% 50%;
  }
  50% {
    transform: scale(0.8);
    transform-origin: 50% 50%;
  }
  100% {
    transform: scale(1);
    transform-origin: 50% 50%;
  }
}
/* 无人机 3D，同步隐藏 2D飞机 */
#olcs3d .ol-overlay-container .uav-main {
  /* display: none !important; */
  visibility: hidden !important;
}
/* 空地联防icon */
.air-ground-icon-main {
  width: 46px;
  height: 46px;
  cursor: pointer;
}
/* 比例尺 scaleline */
.ol-scale-line {
  position: absolute !important;
  right: unset !important;
  left: 20px !important;
  bottom: 10px !important;
  box-sizing: border-box !important;
}
/* 鼠标位置 mousePosition 自定义样式 */
.mouse-position {
  position: absolute;
  bottom: 80px;
  left: 120px;
  width: 150px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 4px;
  font-size: 12px;
  color: #eee;
  background: rgba(0, 60, 136, 0.3);
}
/* 鼠标提示显示隐藏 */
.mouse-tips {
  max-width: 200px;
  line-height: 30px;
  padding: 0 5px;
  background: rgba(0, 0, 0, 0.4);
  font-size: 12px;
  color: #fff;
  border-radius: 4px;
}
.show {
  display: block;
}
.hide {
  display: none;
}

/* 无人机弹窗 */
.uav-popup-overlay {
  min-width: 200px;
}
.show-uav-popup-overlay {
  display: block;
}
.hide-uav-popup-overlay {
  display: block;
}

/* 自定义点（警察、消防员）顶部标签 */
.custom-overlay {
  color: white;
  border-radius: 4px;
  padding: 5px 10px;
  box-sizing: border-box;
  font-size: 12px;
}
</style>
